﻿<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
        <script>
            $(document).ready(function () {
                getToppings();
            });
            
            function getToppings() {
                $.getJSON("http://localhost:51368/PizzaMario/GetAllToppings", function (data) {
                    var toppingArray = data['data'];
                    var checkBoxHTML = "";
                    for (var i = 0; i < toppingArray.length; i++) {
                        checkBoxHTML += "<input type=\"checkbox\" id=\"checkBox + i\" name=\"topping\" value=" + toppingArray[i] + " onChange=\"checkBoxChecker()\">" + toppingArray[i] + "<br>";
                    }
                    
                    //Add buttons!
                    checkBoxHTML += "<input type=\"text\" name=\"newToppingName\" id=\"newToppingName\" PlaceHolder=\"new topping\"><button type=\"button\" name=\"addTopping\" onClick=\"newTopping()\">Add topping</button><br>";

                    $("#toppings").html(checkBoxHTML);
                    
                    $("#pizzas").html("Selecteer toppings om een pizza te bestellen");
                });
                
                if( $("#toppings").length == 0 ) {
                    var checkBoxHTML = "";
                    //Add buttons!
                    checkBoxHTML += "<input type=\"text\" name=\"newToppingName\" id=\"newToppingName\" PlaceHolder=\"new topping\"><button type=\"button\" name=\"addTopping\" onClick=\"newTopping()\">Add topping</button><br>";

                    $("#toppings").html(checkBoxHTML);
                    
                    $("#pizzas").html("Maak een nieuwe topping aan");
                }

            }

            function getPizzas(toppings) {
                if (toppings.length != 0) {
                    
                    var toppingsArray = new Array();
                    for (var i = 0; i < toppings.length; i++ ) {
                        toppingsArray[i] = toppings[i];
                    }
                    var postData = { toppings: toppingsArray };

                    $.ajax({
                        type: 'POST',
                        url: 'http://localhost:51368/PizzaMario/GetPizzasForToppings',
                        data: postData,
                        success: function (result) {
                            var pizzas = result['data'];
                            
                            var pizzaHTML = "";
                            if (pizzas.length == 0) {
                                pizzaHTML += "<input type=\"text\" name=\"newPizza\" id=\"newPizza\" PlaceHolder=\"Pizza Name\"><button type=\"button\" name=\"addPizza\" onClick=\"addPizza()\">Add pizza</button><br>";
                            }
                            for (var i = 0; i < pizzas.length; i++) {
                                var pizza = pizzas[i];

                                var toppings = pizza.ToppingNames;
                                pizzaHTML += "<p><b>" + pizza.Name + "</b><br>";
                                for (var j = 0; j < toppings.length; j++) {
                                    pizzaHTML += toppings[j] + ",";
                                }
                                pizzaHTML = pizzaHTML.substring(0, pizzaHTML.length - 1);
                                pizzaHTML += "<br></p>";

                            }
                            $("#pizzas").html(pizzaHTML);
                        },
                        traditional : true,
                        error: function (result, ajaxOptions, thrownError) {
                            alert("Errormessage: " + result.status);
                            alert(thrownError);
                        }
                    });
                } else {
                    $("#pizzas").html("Selecteer toppings om een pizza te bestellen");
                }
                // als hij leeg is de mogelijkheid geven nieuwe pizza te maken met een naam

            };

            function newTopping() {
                //new topping met toppingString
                
                var toppingString = $("#newToppingName").val();
                if (toppingString === "") {
                    alert("Geen topping ingevoerd!");
                    return;
                }
                
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:51368/PizzaMario/AddTopping',
                    data: {
                        'toppingName': toppingString
                    },
                    success: function () {
                        getToppings();
                    },
                    error: function (result, ajaxOptions, thrownError) {
                        alert("Errormessage: " + result.status);
                        alert(thrownError);
                    }
                });
                
            };
            
            function addPizza() {
                //call naar website om pizza te maken
                
                var toppings = [];
                $('input:checkbox:checked').each(function () {
                    toppings.push(this.value);
                });

                var toppingsArray = new Array();
                for (var i = 0; i < toppings.length; i++) {
                    toppingsArray[i] = toppings[i];
                }

                var pizzaNameValue = $("#newPizza").val();

                var postData = {
                    pizzaName: pizzaNameValue,
                    pizzaToppings: toppingsArray
                };
                
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:51368/PizzaMario/AddPizza',
                    data: postData,
                    success: function () {
                        checkBoxChecker();
                    },
                    traditional: true,
                    error: function (result, ajaxOptions, thrownError) {
                        alert("Errormessage: " + result.status);
                        alert(thrownError);
                    }
                });
            };
            
            function checkBoxChecker() {
                var toppings = [];
                $('input:checkbox:checked').each(function() {
                    toppings.push(this.value);
                });

                getPizzas(toppings);
            };
        </script>
    </head>
    <body>
        <div id="toppings">
        </div>

        <hr>

        <div id="pizzas">
        </div>
    </body>
</html>
